<template>
    <div id="max">
        <router-link @click="x1" to="./views/首页.vue">
            <svg t="1676449975083" class="a1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5728" width="16" height="16">
                <path
                    d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z"
                    p-id="5729" fill="#707070"></path>
            </svg>
        </router-link>
        <el-input class="aa" placeholder="请输入内容" v-model="input2" :prefix-icon="Search">
        </el-input>
        <svg t="1676449115328" class="a" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1734" width="16" height="16">
            <path
                d="M478.799854 897.161197c-226.701209 0-411.154197-184.440709-411.154197-411.141918S252.098645 74.877361 478.799854 74.877361s411.128615 184.440709 411.128615 411.141918S705.501062 897.161197 478.799854 897.161197zM478.799854 114.134457c-205.053166 0-371.897102 166.830633-371.897102 371.883799s166.843936 371.883799 371.897102 371.883799S850.671373 691.072445 850.671373 486.019279 683.85302 114.134457 478.799854 114.134457z"
                p-id="1735"></path>
            <path
                d="M946.616562 940.737668c-5.034666 0-10.044774-1.916653-13.878079-5.750981L775.070534 777.318738c-7.667633-7.667633-7.667633-20.088524 0-27.756157 7.667633-7.667633 20.088524-7.667633 27.756157 0l157.667949 157.667949c7.667633 7.667633 7.667633 20.088524 0 27.756157C956.661336 938.821015 951.652252 940.737668 946.616562 940.737668z"
                p-id="1736"></path>
        </svg>
        <span id="ss" @click="xx"> 搜索</span>
        <div class="box" :data="tableData" v-for="item in tableData" :key="item" @click="dj(item.id)">
                <div class="Title">
                    <div class="BoxTitle">{{ item.title }}</div>
                    <div class="BoxDemand">急聘</div>
                </div>
                <div class="Addr">
                    <svg t="1676356109376" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7878" width="16" height="16">
                        <path
                            d="M512 938.666667c-53.333333 0-384-257.258667-384-469.333334S299.925333 85.333333 512 85.333333s384 171.925333 384 384-330.666667 469.333333-384 469.333334z m0-352c64.8 0 117.333333-52.533333 117.333333-117.333334s-52.533333-117.333333-117.333333-117.333333-117.333333 52.533333-117.333333 117.333333 52.533333 117.333333 117.333333 117.333334z"
                            fill="#bfbfbf" p-id="7879"></path>
                    </svg>
                    <p>{{ item.county }}</p>
                    <svg t="1676356518106" class="js" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9312" width="16" height="16">
                        <path
                            d="M984.3485 312.803121A522.495274 522.495274 0 0 1 1024 512.340622c0 68.664794-13.454204 135.878922-40.391055 198.854835a519.736167 519.736167 0 0 1-109.738514 162.787329c-47.445267 46.705713-101.973192 84.195439-162.872663 109.681626A505.172632 505.172632 0 0 1 512.000711 1023.998578a505.172632 505.172632 0 0 1-198.997057-40.334166 520.191278 520.191278 0 0 1-162.872663-109.681626c-46.734157-47.416823-84.280772-101.916303-109.766958-162.787329A504.233966 504.233966 0 0 1 0.001422 512.369066c0-68.664794 13.454204-135.878922 40.391055-198.883279A519.736167 519.736167 0 0 1 150.102547 150.755346c47.445267-46.705713 101.973192-84.195439 162.872663-109.681625A511.913956 511.913956 0 0 1 512.683377 0c68.721682 0 135.964256 13.454204 199.025501 40.334166a520.134389 520.134389 0 0 1 162.872663 109.681626c46.734157 47.416823 84.280772 101.916303 109.766959 162.787329zM512.0576 270.335625A42.382163 42.382163 0 0 0 469.362548 227.55524 42.382163 42.382163 0 0 0 426.667496 270.335625v284.216494A42.382163 42.382163 0 0 0 469.362548 597.332504c2.161775 0 3.612439 0 5.802659-0.71111 1.42222 0 3.612439 0.71111 5.774214 0.71111H753.778153A42.382163 42.382163 0 0 0 796.44476 554.552119a42.382163 42.382163 0 0 0-42.695051-42.780385h-240.980999V270.335625h-0.71111z"
                            fill="#bfbfbf" p-id="9313"></path>
                    </svg>
                    <p>{{ item.work }}</p>
                </div>
                <div class="wages">
                    <p style="color: #ff6600; font-size: 14px">{{ item.salary }}</p>
                    <p>{{ item.salaryStatus }}</p>
                    <p>|</p>
                    <p>{{ item.settlement }}</p>
                </div>
            </div>
</div>
</template>
  
<script lang="ts" setup>
import { ref, } from "vue";
import { toSou} from "@/api/productList"

let input2 = ref("");
let tableData = reactive([])

// 搜索查询的方法
let xx = () => {
    // console.log(input2.value);
    toSou(input2.value).then(res=> {
        console.log(res)
    })
    // 如果说数据存在,才去拼接this.form.productCategoryId[1]
    // reactive.form.productCategoryId =reactive.form.productCategoryId && reactive.form.productCategoryId[1];
};
// 返回首页的方法
let x1 = () => {
    console.log(22);
};
</script>
<style lang="scss">
#max {
    width: 100%;
    height: 999px;
    background-color: #f7f7f7;

    .a {
        position: relative;
        left: -70%;
        top: 5px;
    }

    .aa {
        width: 75%;
        height: 30px;
        position: relative;
        left: 20px;
        top: 3px;
    }

    #ss {
        font-size: 14px;
        position: relative;
        top: 3px;
        left: 10px;
    }

    .a1 {
        position: relative;
        left: 8px;
        top: 5px;
    }
}
</style>
  